<template>
  <zx-container>
    <template #zx-primary-search>
      <zx-search-form
        v-model:formData="searchParams"
        :formItems="formItems"
        v-model:page="pages.page"
        @search="searchTable"
      />
    </template>
    <template #zx-primary-header>
      <TableTitle title="资源申请列表">
        <div style="display: flex; align-items: center">
          <el-dropdown
            v-if="allApplyTypeCodes.includes('domain')"
            trigger="click"
          >
            <el-button type="primary" icon="List">批量申请</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleBatch">
                  批量申请投放站点
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button
            type="primary"
            icon="CirclePlus"
            class="ml-12"
            @click="handleAdd"
          >
            新增申请
          </el-button>
        </div>
      </TableTitle>
      <TableTab
        v-model="activeTab"
        :tabList="tabList"
        :activeTab="activeTab"
        :total="total"
      />
    </template>
    <template #zx-primary-container>
      <zx-table
        ref="tableRef"
        height="100%"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        minWidth="150"
      ></zx-table>
      <zx-pagination
        v-model:page="pages.page"
        v-model:size="pages.per_page"
        :total="total"
        @change="getTableData"
      />
    </template>
  </zx-container>
  <EditDialog
    v-model:show="showEditDialog"
    :from="dialogFrom"
    :activeRow="activeRow"
    @success="searchTable"
  />
  <DetailDialog
    v-model:show="showDetailDialog"
    :activeTab="activeTab"
    :activeRow="activeRow"
    @success="searchTable"
    @editApply="editApply"
  />
  <BatchAdd v-model:show="showBatchDialog" @success="searchTable" />
</template>

<script setup>
import { useTable } from 'zhixin-ui';
import { companyApplicationList } from '@/api/resources.js';
import { formItems, columns, searchParams, injectData } from './tableConst';
import TableTitle from '@/components/TableTitle';
import TableTab from '@/components/TableTab';
import EditDialog from './EditDialog';
import DetailDialog from './DetailDialog';
import { PAGES, INIT_ORANIZE_PARAMS, APPLY_STATUS_LIST } from '@/utils/const';
import {
  companyFb_account_typeAll,
  companyApplication_typeAll,
  companySiteTypeAll
} from '@/api/system';
import BatchAdd from './BatchAdd';

const props = defineProps({
  activeOranize: {
    type: Object,
    default: () => {}
  }
});

// 表格hooks
const tableRef = ref();
const { loading, tableData, pages, total, getTableData } = useTable(
  companyApplicationList,
  {
    formItems,
    tableRef,
    searchParams,
    autorun: false,
    pages: PAGES()
  }
);

// tab
const activeTab = ref(1);
const tabList = reactive(APPLY_STATUS_LIST);
watch(activeTab, () => {
  total.value = 0;
  initTable();
});

function initSearchParams() {
  pages.value.page = 1;
  searchParams.status = activeTab.value;
  INIT_ORANIZE_PARAMS(searchParams, props.activeOranize);
}
function searchTable(type) {
  if (type === 'reset') initSearchParams();
  getTableData();
}
function initTable(keep) {
  if (!keep) initSearchParams();
  getTableData();
}

const dialogFrom = ref('');

// 新增申请
const showEditDialog = ref(false);
// 新增点击事件
function handleAdd() {
  dialogFrom.value = 'add';
  showEditDialog.value = true;
}

// 批量申请
const showBatchDialog = ref(false);
function handleBatch() {
  showBatchDialog.value = true;
}

// 详情
// 详情点击事件
const activeRow = ref({});
const showDetailDialog = ref(false);
function handleDetail(row) {
  activeRow.value = row;
  showDetailDialog.value = true;
}

// 重新填写
function editApply() {
  dialogFrom.value = 'edit';
  showDetailDialog.value = false;
  showEditDialog.value = true;
}

// 获取所有查询下拉
const allApplyTypeCodes = ref([]);
function getOptions() {
  // 申请类型 公司级别
  companyApplication_typeAll().then(res => {
    const resData = res.data || [];
    allApplyTypeCodes.value = [];
    for (let i = resData.length - 1; i >= 0; i--) {
      const item = resData[i];
      if (!item.childs?.length) resData.splice(i, 1);
      item.childs?.forEach(it => {
        allApplyTypeCodes.value.push(it.code);
      });
    }
    formItems.sqlx_map.options = [
      { name: '全部', id: '-1', code: undefined },
      ...resData
    ];
  });
  // 个号类型 公司级别
  companyFb_account_typeAll().then(res => {
    const resData = res.data || [];
    formItems.fb_account_type.options = [
      { label: '全部', value: undefined },
      ...resData.map(item => {
        return { label: item.name, value: item.id };
      })
    ];
  });
  // FB广告账户 公司级别
  companySiteTypeAll({ type: 'fb_adv_account_type' }).then(res => {
    const resData = res.data || [];
    formItems.fb_advertisement_account_type.options = [
      { label: '全部', value: undefined },
      ...resData.map(item => {
        return { label: item.name, value: item.id };
      })
    ];
  });
}

defineExpose({ initTable, getOptions });
injectData({ handleDetail, activeTab });
</script>

<style lang="scss" scoped></style>
